<template>
    <div class="login">
        <div class="login-box">
            <div @click="close" class="close-window">
                <Icon type="close-round"></Icon>
            </div>
            <div class="title">
                <h2 class="clearfix">
                    <span>忘记密码</span>
                </h2>
            </div>
            <Form ref="form" :model="form" :rules="rules">
                <Form-item prop="phone">
                    <Input type="text" v-model="form.phone" placeholder="手机号"></Input>
                </Form-item>
                <Form-item prop="code">
                    <Row :gutter="20">
                        <Col span="16">
                            <Input type="text" v-model="form.code" placeholder="验证码"></Input>
                        </Col>
                        <Col span="8">
                            <Button :disabled="disabled" @click="codeBtn">{{ codeText}}</Button>
                        </Col>
                    </Row>
                </Form-item>
                <Form-item prop="password">
                    <Input type="password" v-model="form.password" placeholder="请输入新密码"></Input>
                </Form-item>
                <Form-item prop="passwdCheck">
                    <Input type="password" v-model="form.passwdCheck" placeholder="再次确认密码"></Input>
                </Form-item>
                <Form-item>
                    <Button type="success" long @click="getPassword('form')">找回密码</Button>
                    <Button long @click="login" style="margin-top:10px;">已有账号？登录</Button>
                    <Button long @click="reg" style="margin-top:10px;">还没有账号？立即注册</Button>
                </Form-item>
            </Form>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                form:{},
                disabled:false,
                codeText:'获取验证码',
                rules:{
                    phone: [{ required: true, pattern: /^((0\d{2,3}\d{7,8})|(1[35874]\d{9}))$/, message: '请输入正确的账号', trigger: 'blur' }],
                    code:[{required:true,message: '请输入验证码', trigger: 'blur'}],
                    password: [
                        {required: true,message:'请输入密码',trigger:'blur'},
                        { type: 'string', min: 6,max:20, message: '密码长度在6~16位之间', trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            getPassword(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.post('/member/forgetPassword',{
                            code:this.form.code,
                            password:this.form.password,
                            phone:this.form.phone,
                            fe:1
                        })
                        .then(res=>{
                            const data = res.data;
                            if(data.status_code == 200){
                                this.$store.dispatch('forgot',false);
                                this.$store.dispatch('login',true);
                                this.$Notice.success({
                                    title: '修改成功',
                                });
                                // this.$Message.success('修改成功');
                            }
                        })
                        .catch(err=>{
                            //this.$Message.success(err.response);
                        })
                    }
                })
            },
            close(){
                this.$store.dispatch('forgot',false)
            },
            login(){
                this.$store.dispatch('forgot',false);
                this.$store.dispatch('login',true);
            },
            reg(){
                this.$store.dispatch('changeRegState',true);
                this.$store.dispatch('forgot',false)
            },
            codeBtn (){
                if(!(/^((0\d{2,3}\d{7,8})|(1[35874]\d{9}))$/.test(this.form.phone))){
                    this.$Notice.warning({
                        title: '请输入正确的手机号'
                    });
                    return;
                }
                let sec =60;
                for(let  i=0; i<=60; i++){
                    var that = this;
                    setTimeout(function(){
                        if (sec != 0) {
                            that.codeText =  sec + "秒后重发验证" ;
                            that.disabled = true;
                            sec--;
                         } else {
                            sec = 60; //如果倒计时结束就让获取验证码显示出来
                            that.disabled = false;
                            that.codeText =  "获取验证码" ;
                        }

                    }, i * 1000)
                }
                this.$http.post('http://www.gjypzc.cn/sendForgetPasswordMsg',{
                    phone:this.form.phone,
                    fe:1
                }).then(ret => {
                    this.testCode = ret.data.code;
                    this.$Notice.success({title: '获取验证码成功'});
                }).catch(err => {
                    this.$Notice.error({title: '获取验证码失败..'});

                })

            },
        }
    }
</script>
<style scoped>
    body {
        background-color: #eff2f7;
    }

    .login {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        /*background: url(../../assets/images/banner3.jpg)no-repeat 0 0 ;*/
        background-size: 100%;
        z-index: 99;
        left:0;
        top:0;
    }

    .login-box {
        background-color: #fff;
        padding: 20px 30px;
        max-width: 400px;
        width:90%;
        /*position: absolute;
        right: 4%;
        top: 15%;*/
        margin: 0 auto;
        position: relative;
        top: 120px;
        border-radius: 0;

    }

    h1 {
        text-align: center;
    }

    .be.divider {
        position: relative;
        overflow: hidden;
        clear: both;
        height: auto;
        margin: 1em 0;
        line-height: 1;
        text-align: center;
    }

    .be.divider:before, .be.divider:after {
        box-sizing: inherit;
        position: absolute;
        content: '';
        z-index: 1;
        width: 50%;
        top: 50%;
        height: 0;
        border-top: 1px solid #e0e0e0;
    }

    .be.divider:before {
        margin-left: calc(-51.5%);
    }

    .be.divider:after {
        margin-left: 1em;
    }
    .close-window{
        padding:10px;
        position:absolute;
        right: 20px;
        top:10px;
        cursor: pointer;
    }
    .close-window:hover{
        color: #15ccac;
    }
    .title{ margin-top: 30px; margin-bottom:30px;}
    .title h2{ text-align:center;}
    .title h2 span{ font-size:26px; float: left;}
    .title p{ float: right; font-size:16px; color:#999; position: relative; top:10px;}
    .title p a{ color:#15ccac;}
    .oauth{ padding-bottom:20px;}
    .qq,.wechat{ box-sizing:border-box; width:40%; float: left; padding:5px 10px; color:#fff; display:flex; align-content:center; margin-top:20px; border-radius:3px;}
    .qq{ background:#1296db;}
    .wechat{ background:#0fd01c; margin-left:20%;white-space: nowrap;}
    .qq i,.wechat i{ width:20px; height:20px; float: left;}
    .qq i{ background:url('../../assets/images/icon/qq.svg') no-repeat; background-size:100% 100%;}
    .wechat i{ background:url('../../assets/images/icon/wechat.svg') no-repeat; background-size:100% 100%;}
    .qq span,.wechat span{ margin-left:10px; position: relative; top:3px;}
    .black-ipt{ border-radius: 0;border: 1px solid #000000 !important;}
    @media (max-width:992px){
        .login{
            display: flex;
            align-items: center;
        }
        .login-box{
            top:0;
        }
    }
</style>
